<template>
  <!-- 单选题 -->
  <div class="create-radio">
    
    <span>{{ number+1 }}. 单选题</span>
    <n-input
      type="textarea"
      placeholder="设置题目"
      clearable
      class="set-title"
      v-model:value="radioData.title"
    />
    <!-- 分值 -->
    <label class="score">
      <span>分值:</span>
      <n-input-number
        placeholder="分值"
        :min="0"
        :max="10"
        v-model:value="radioData.score"
      />
    </label>
    <!-- 整个选项框 -->
    <n-radio-group v-model:value="radioData.answer" class="options">
      <!-- 每一条选项 -->
      <div v-for="(item, index) in topicOption" :key="index" class="option">
        <!-- 选项框A B C D-->
        <el-tooltip effect="light" content="设为答案" placement="left">
          <n-radio :value="item.option">
            <span>{{ item.option }}</span>
          </n-radio>
        </el-tooltip>
        <!-- 输入框 -->
        <n-input
          v-model:value="item.text"
          type="text"
          placeholder="选项"
          class="option-text"
          clearable
        />
        <!-- 删除图标 -->
        <img
          src="/src/assets/svg/delete1.svg"
          class="delete-img"
          @click="deleteOption(item, index)"
        />
      </div>
    </n-radio-group>
    <!-- 添加选项按钮 -->
    <p class="add-option" @click="onAddOption()">+ 添加选项</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { openInfo } from "@/utils/openInfo";

const props =defineProps(['radioData','number'])
// 单选题数据
const radioData = props.radioData
const number =props.number
// 单选题选项
const topicOption = ref([
  { option: "A", text: "" },
  { option: "B", text: "" },
  { option: "C", text: "" },
  { option: "D", text: "" },
]);

// 获取选项和选项值
radioData.options = topicOption

//删除选项
function deleteOption(value, index) {
  //   console.log("删除这个选项",value);
  let mapping = ["A", "B", "C", "D", "E", "F", "G", "H"];
  //从index处删除1个元素
  topicOption.value.splice(index, 1);
  mapping = mapping.slice(0, topicOption.value.length);
  for (let i = 0; i < topicOption.value.length; i++) {
    topicOption.value[i].option = mapping[i];
  }
}

// 添加选项
function onAddOption() {
  if (topicOption.value.length >= 8) {
    openInfo("单选题最多添加8个选项");
  } else {
    const mapping = { 0: "A",1: "B",2: "C",3: "D",4: "E",5: "F",6: "G",7: "H"};
    // const mapping = { 0: "A",1: "B",2: "C",3: "D",4: "E",5: "F",6: "G",7: "H"};
    //添加到数组
    topicOption.value.push({
      option: mapping[topicOption.value.length],
      text: "",
    });
  }
}
</script>

<style scoped>
/* 设置题目 */
.set-title {
  margin: 10px 0px 10px 0px;
}
/* 分值 */
.score {
  display: flex;
  align-items: center;
}
/* 分值二字文本 */
.score span {
  width: 40px;
  cursor: pointer;
}
/* 全部选项框 */
.options {
  width: 100%;
}
/* 单个选项框 */
.option {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* 添加选项 */
.add-option {
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  font-style: italic;
  color: rgb(65, 63, 61, 0.8);
  transition: color 0.3s ease, text-decoration 0.3s ease, font-size 0.3s ease;
}
.add-option:hover {
  color: rgba(22, 112, 112, 0.8);
  text-decoration: underline dashed;
  font-size: 15px;
}
/* 删除选项图标 */
.delete-img {
  margin-left: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.delete-img:hover {
  transform: scale(1.2);
}
</style>